<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <p>
          <vxe-input
            v-model="filterName"
            type="search"
            placeholder="试试全表搜索"
            @keyup="searchEvent"
          ></vxe-input>
        </p>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-overflow
      stripe
      ref="xTable"
      height="500"
      :column-config="{ resizable: true, useKey: true }"
      :row-config="{ isHover: true, useKey: true }"
      align="center"
      :data="stuList"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="name" title="训练学员姓名"></vxe-column>
      <vxe-column
        field="coachName"
        title="分配教练"
        :formatter="formatterSex"
      ></vxe-column>
      <vxe-column field="type" title="分配类型"></vxe-column>
      <vxe-column field="subject" title="科目" show-overflow></vxe-column>
      <vxe-column title="分配时间" show-overflow>
        <template #default="{ row }">
          <div>
            {{ row.createdAt.slice(0, 10) }} {{ row.createdAt.slice(11, 18) }}
          </div>
        </template>
      </vxe-column>

      <vxe-column field="content" title="备注" show-overflow></vxe-column>
      <vxe-column title="操作" width="100" show-overflow>
        <template #default="{ row }">
          <vxe-button
            type="text"
            class="delbutton"
            icon="vxe-icon-delete"
            @click="removeEvent(row)"
            >删除</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { VXETable, VxeTableInstance, VxeColumnPropTypes } from "vxe-table";
import { studentGet } from "../../../api/trarecord";
interface RowVO {
  objectId: string;
  name: string;
  subject: string;
  createdAt: string;
  content: string;
  coachName: string;
}

const xTable = ref<VxeTableInstance<RowVO>>();

const tableData = ref<RowVO[]>([]);
const filterName = ref("");

const list = ref<any>([]);
const sexList = ref([
  { label: "女", value: "0" },
  { label: "男", value: "1" },
]);

const formatterSex: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
  const item = sexList.value.find((item) => item.value === cellValue);
  return item ? item.label : "";
};

const removeEvent = async (row: RowVO) => {
  const type = await VXETable.modal.confirm("您确定要删除该数据?");
  if (type === "confirm") {
    const $table = xTable.value;
    if ($table) {
      $table.remove(row);
    }
  }
};
interface Types {
  [key: string]: string;
}
const searchEvent = () => {
  const filterVal = String(filterName.value).trim().toLowerCase();
  if (filterVal) {
    const filterRE = new RegExp(filterVal, "gi");
    const searchProps = ["name", "role", "nickname", "age", "address"];
    const rest = tableData.value.filter((item: Types) =>
      searchProps.some(
        (key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1
      )
    );
    list.value = rest.map((row) => {
      const item = Object.assign({}, row) as Types;
      searchProps.forEach((key: any) => {
        item[key] = String(item[key]).replace(filterRE, (match) => match);
      });
    });
  } else {
    list.value = tableData.value;
  }
};
searchEvent();

const stuList = ref<RowVO[]>([]);
studentGet().then((res) => {
  stuList.value = res.data.results;
});
</script>

<style scoped lang="scss">
.delbutton {
  background: #ff5722;
  color: white;
}
</style>